<!-- CourseAdd 添加课程 -->
<template>
  <div class="content">
    <el-form class="page-form" :model="courseData.data" :rules="courseData.rules" ref="courseForm" size="medium"
             label-width="100px">

      <el-form-item label="课程名称：" prop="title">
        <el-input v-model="courseData.data.title" placeholder="请输入课程名称(不得超过30字)" maxlength="30"></el-input>
      </el-form-item>

      <el-form-item label="二级标题：" prop="subTitle">
        <el-input v-model="courseData.data.subTitle" placeholder="请输入二级标题"></el-input>
      </el-form-item>

      <el-form-item label="课程封面：" prop="pic">
        <!-- :limitSize="{width: 700, height: 400}" -->
        <Upload v-model="courseData.data.pic" :limit="1" :fileLists="courseData.data.pic ? [courseData.data.pic]: []"></Upload>
        <!-- <span style="color:#c0c4cc">课程封面图片尺寸小于700x400像素</span> -->
      </el-form-item>

      <el-form-item label="课程类型：" prop="type">
        <el-select v-model="courseData.data.type" placeholder="请选择课程类型" @change="onTypeChange">
          <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="课程排序：" prop="bSort">
        <el-input v-model="courseData.data.bSort" placeholder="请输入课程排序"></el-input>
      </el-form-item>
      <el-form-item label="学习用时：" prop="useTime">
        <el-input v-model="courseData.data.useTime" placeholder="请输入学习用时">
          <template slot="append">秒</template>
        </el-input>
        <div style="color: rgba(230, 162, 60, .7);font-size: 12px; line-height: 20px;position: absolute;right: 230px;">
          当课程类型为视频课程时，学习用时要小于等于上传视频时间
        </div>
      </el-form-item>

      <el-form-item label="是否上架：" prop="status">
        <el-radio-group v-model="courseData.data.status">
          <el-radio :label="'1'">是</el-radio>
          <el-radio :label="'0'">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="课程介绍：" prop="description">
        <el-input :rows="5" type="textarea" maxlength="150" show-word-limit v-model="courseData.data.description"
                  placeholder="请输入课程介绍"></el-input>
      </el-form-item>

      <!-- 文章课程 -->
      <el-form-item label="课程内容：" prop="content" v-if="courseData.data.type === '2'">
        <UEditor v-model="courseData.data.content"></UEditor>
      </el-form-item>

      <!-- 课程视频 -->
      <el-form-item label="课程视频：" prop="vidioUrl" v-if="courseData.data.type === '1'">
        <VideoUpload v-model="courseData.data.vidioUrl" @getVideoTime="handleVideoTime"></VideoUpload>
      </el-form-item>
      <!-- 视频时间 -->
      <el-form-item label="视频时间：" prop="vidioTime" v-if="courseData.data.type === '1'">
        <el-input v-model="courseData.data.vidioTime" placeholder="请输入视频时间">
          <template slot="append">秒</template>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="handleResetForm('courseForm')">返 回</el-button>
        <el-button type="primary" :loading="btnLoading" @click="handleSubmitForm('courseForm')">保 存</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import { CourseFormRules } from '@/utils/rules'
import Upload from '@/components/Upload/edit'
import VideoUpload from '@/components/Upload/videoUpload'
import UEditor from '@/components/UEditor'
import { ExportList } from '@/utils'
import { AddCourse } from '@/api/train'
export default {
  name: 'CourseAdd',
  components: { Upload, VideoUpload, UEditor },
  data () {
    return {
      btnLoading: false,
      courseData: {
        data: {
          title: '',
          subTitle: '',
          type: '1',
          status: '0',
          pic: '',
          bSort: '0',
          content: '',
          description: '',
          useTime: '',
          vidioTime: '',
          vidioUrl: ''
        },
        rules: CourseFormRules
      },
      typeList: ExportList('courseTypeList'),
      statusList: ExportList('courseStatusList')
    }
  },
  props: {},
  watch: {},
  computed: {},
  mounted () { },
  methods: {
    onTypeChange (val) {
      let fields = this.$refs['courseForm'].fields
      fields.forEach((e, index) => {
        if (e.prop && e.prop === 'content' && val === '1') {
          fields[index].resetField()
        }
        if (e.prop && e.prop === 'vidioUrl' && val === '2') {
          fields[index].resetField()
        }
      })
    },
    handleSubmitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) return
        this.btnLoading = true
        let params = JSON.parse(JSON.stringify(this.courseData.data))
        if (params.type === '2') {
          // 文章课程
          params.vidioTime = '0'
          params.vidioUrl = ''
          AddCourse(params).then(res => {
            this.$message.success(res.message || '添加成功')
            setTimeout(() => {
              this.btnLoading = false
              this.$router.go(-1)
            }, 500)
          }).catch(e => {
            this.btnLoading = false
          })
        } else {
          params.content = ''
          AddCourse(params).then(res => {
            this.$message.success(res.message || '修改成功')
            setTimeout(() => {
              this.btnLoading = false
              this.$router.go(-1)
            }, 500)
          }).catch(() => {
            this.btnLoading = false
          })
          // 学习时间小于等于视频时间
          // if (this.courseData.data.useTime <= this.courseData.data.vidioTime) {

          // } else {
          //   this.btnLoading = false
          //   this.$message.warning('学习时间小于等于视频时间')
          // }
        }
      })
    },
    handleResetForm (formName) {
      this.$router.go(-1)
    },
    handleVideoTime (val) {
      // floor向下取整 ceil 向上取整 round 四舍五入
      const time = Math.floor(val)
      // this.courseData.data.useTime = time
      this.courseData.data.vidioTime = time
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
